<style type="text/css">
h4.prog.sub-title {
    padding-bottom: 3px;
    border-bottom: 1px dashed #e5e5e5;
}
</style>
<div ng-controller="progressController">
    <div class="alert alert-info">
        <p>这里展示的是进度条指令，指令有四个扩展属性，value(必须)，striped(可选)，label(可选), style(可选)。</p>
        <p>value为数值型，代表进度条的值，范围为：0 - 100</p>
        <p>striped为布尔型，代表是否显示为斑马纹样式，默认为false</p>
        <p>label为布尔型，代表是否显示文字，默认为false</p>
        <p>style为字符串，代表进度条样式，可选范围为：'progress-bar-success','progress-bar-info','progress-bar-danger','progress-bar-warning';默认为'progress-bar-info'</p>
    </div>
    <h4 class="prog sub-title">展示</h4>

    <sc-progress value="prog.value" striped="prog.striped" label="prog.label" style="prog.style"></sc-progress>

    <h4>选项</h4>
    <label>进度：
        <input type="number" class="form-control" ng-model="prog.value" />
    </label>
    <button class="btn btn-primary" ng-click="prog.value=0">0%</button>
    <button class="btn btn-primary" ng-click="prog.value=50">50%</button>
    <button class="btn btn-primary" ng-click="prog.value=100">100%</button>
    <hr/>
    <label>斑马纹
        <input type="checkbox" ng-model="prog.striped" />
    </label>
    <label>文字
        <input type="checkbox" ng-model="prog.label" />
    </label>
    <hr/>
    <label>风格：
        <select ng-model="prog.style" class="form-control">
            <option value="progress-bar-success">progress-bar-success</option>
            <option value="progress-bar-info">progress-bar-info</option>
            <option value="progress-bar-danger">progress-bar-danger</option>
            <option value="progress-bar-warning">progress-bar-warning</option>
        </select>
    </label>
</div>
